<template>
    <el-form-item label="创意素材" :prop="`creatives_base.creatives_class.${dataForm.creatives_index}.creatives`" :rules="{required: true, message: '请选择', trigger: ['blur', 'change']}">
        <div class="video_box">
            <div class="video_head flexbox flexcenter flexbetween pl_20 pr_20">
                <div>
                    <el-button plain class="plain_blue" size="small" icon="el-icon-circle-plus-outline" @click="addVideo">TikTok帖子</el-button>
                    <el-button plain class="plain_blue" size="small" icon="el-icon-circle-plus-outline" @click="addVideo('accVideo')">从素材库添加</el-button>
                </div>
                <div class="has_num_text">已选：<span class="blue">{{dataForm.creatives_base.creatives_class[dataForm.creatives_index].creatives.length}}</span>/{{getMaxLength}}</div>
            </div>
            <div class="video_content">
                <template v-if="dataForm.creatives_base.creatives_class[dataForm.creatives_index].creatives.length>0">
                    <template v-if="dataForm.creatives_base.creatives_class[dataForm.creatives_index].creatives[0].video_info">
                    <div class="tk_vd_item" v-for="(item,index) in dataForm.creatives_base.creatives_class[dataForm.creatives_index].creatives" :key="index">
                        <div class="tk_vd_duration">{{secondToTimeStr(item.video_info.duration)}}</div>
                        <i class="el-icon-error" @click="deletVideo(index)"></i>
                        <div class="tk_vd_img" ><img :src="item.video_info.poster_url" alt=""></div>
                        <div class="tk_vd_name">{{item.text}}</div>
                    </div>
                    </template>
                    <template v-else>
                        <div class="tk_vd_item_material flexbox" v-for="(item,index) in dataForm.creatives_base.creatives_class[dataForm.creatives_index].creatives" :key="index">
                            <span class="close_icon" @click="deletVideo(index)"><img src="@/assets/img/close_check.svg" alt=""/></span>
                            <div>
                                <div class="tk_vd_img_material" > 
                                    <div class="tk_vd_duration_material" >{{secondToTimeStr(item.duration)}}</div>
                                    <img :src="item.video_cover_url" alt=""> 
                                </div>
                                <div class="change_img  flexbox flexcenter" @click="opendialog(index)">换封面</div>
                            </div>
                            <div class="flex flexbox flexbetween" style="margin-left:12px;flex-direction: column;">
                                <div>{{item.file_name? item.file_name.replace(/(\.mov|\.mp4|\.MOV|\.MP4)$/i, '') :'广告显示'}}</div>
                                <div><el-input placeholder="为广告输入创意文案" v-model="item.ad_text" size="small" maxlength="55" show-word-limit style="width:100%"></el-input></div>
                                <div><el-checkbox true-label="ON" false-label="OFF" v-model="item.dark_post_status">只作为广告显示</el-checkbox> </div>
                            </div>
                        </div>
                    </template>
                </template>
                <div class="no_goods" v-else>请选择帖子</div>
            </div>
        </div>
        <SumbitDialog
            class="savedialog"
            width="960px"
            :dialogVisible.sync="dialogVisible"
            sumbitColor="#165DFF"
            sumbitText="保存"
            @onSubmit="savesuggestCover">
            <div slot="title">选择封面</div>
            <div class="flexbox" style="flex-wrap: wrap;gap: 20px;height: 65vh;overflow: auto;margin-top: 20px;" v-loading="Fdataloading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                <div style="width:215px;height:382px;position: relative;" v-for="item in Fdata">
                    <div class="check" :class="{check_active:item.id == check_id.id}" @click="check_id = item"></div>
                    <img :src="item.url" alt="" style="width:100%;height:100%;border-radius: 8px;">
                </div>
            </div>
        </SumbitDialog>
    </el-form-item>

  
</template>


<script>
import SumbitDialog from "@/components/components/SumbitDialog"
export default {
    props: ["dataForm"],
    components: {SumbitDialog},
    name: "",
    data() {
        return {
            Fdataloading:false,
            dialogVisible:false,
            Fdata:[],
            check_id:{id:""},
            current_index:0
        };
    },
    computed:{
        getMaxLength(){
            let list = this.dataForm.creatives_base.creatives_class
            let num = 0
            for(let i in list){
                num += list[i].creatives.length
            }
            let all = 20 - num
            return all
        }
    },
    created() {
        
    },
    methods: {
        savesuggestCover(){
            if(!this.check_id)return this.$message.warning('请选择封面')
            this.dataForm.creatives_base.creatives_class[this.dataForm.creatives_index].creatives[this.current_index].image_ids = [this.check_id.id]
            this.dataForm.creatives_base.creatives_class[this.dataForm.creatives_index].creatives[this.current_index].video_cover_url = this.check_id.url
            this.dialogVisible = false;
            this.$message.success('保存成功')
        },
      async  opendialog(index){
            this.dialogVisible = true;
            this.Fdataloading = true;
            this.Fdata = [];
            this.check_id = {id:""};

            this.current_index = index;
            const { data: res } = await this.$http.get(
                this.$tiktokUrl + "launch/TiktokInfo/suggestCoverList",{ params:{
                    advertiser_id:this.dataForm.base[0].advertiser_id,
                    video_id:this.dataForm.creatives_base.creatives_class[this.dataForm.creatives_index].creatives[index].video_id
                }}
            );
            
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
              this.Fdata = res.data.list
            }
            this.Fdataloading = false;
        },
        sessionSave() {
            this.$emit("sessionSave");
        },

        deletVideo(index) {
            this.dataForm.creatives_base.creatives_class[
                this.dataForm.creatives_index
            ].creatives.splice(index, 1);
            this.sessionSave();
        },

        addVideo(type) {
            const creatives = this.dataForm.creatives_base.creatives_class[this.dataForm.creatives_index].creatives;
            const isVideoInfoPresent = creatives.length > 0 && creatives[0].video_info;

            const showConfirmDialog = () => {
                return this.$confirm('创意素材目前只支持添加一种类型，切换将清空当前所选, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                });
            };

            const emitEvent = () => {
                if(type === 'accVideo'){
                    this.$emit("accVideo");
                } else {
                    this.$emit("addVideo");
                }
            };
            if( creatives.length == 0){
                return  emitEvent();
            }
            if ((isVideoInfoPresent && type === 'accVideo') || (!isVideoInfoPresent && type !== 'accVideo')) {
                showConfirmDialog().then(() => {
                    this.dataForm.creatives_base.creatives_class[this.dataForm.creatives_index].creatives = [];
                    emitEvent();
                });
            } else {
                emitEvent();
            }
            
        },

        // 秒数转换
        secondToTimeStr(t) {
            if (!t) return;
            t = Math.round(t)
            if (t < 60) return "00:" + ((i = t) < 10 ? "0" + i : i);
            if (t < 3600)
                return (
                    "" +
                    ((a = parseInt(t / 60)) < 10 ? "0" + a : a) +
                    ":" +
                    ((i = t % 60) < 10 ? "0" + i : i)
                );
            if (3600 <= t) {
                var a,
                    i,
                    e = parseInt(t / 3600);
                return (
                    (e < 10 ? "0" + e : e) +
                    ":" +
                    ((a = parseInt((t % 3600) / 60)) < 10 ? "0" + a : a) +
                    ":" +
                    ((i = t % 60) < 10 ? "0" + i : i)
                );
            }
        },
    },
};
</script>


<style scoped>
.no_goods {
    font-size: 14px;
    color: #b4b7bd;
    text-align: center;
    line-height: 300px;
}
.video_box {
    width: 586px;
    box-sizing: border-box;
    padding: 20px 0;
    border: 1px solid #ebebeb;
    border-radius: 4px;
}
.video_content {
    min-height: 300px;
    overflow-y: auto;
    padding: 0 14px;
}
.video_content::-webkit-scrollbar{
    display: none;
}
.tk_vd_item {
    position: relative;
    width: 127px;
    border: 1px solid #4475ff;
    box-sizing: border-box;
    margin: 12px 6px 0;
    float: left;
}
.tk_vd_item_material{
    background: #F8F8F9;
    padding: 12px;
    position: relative;
    width: 100%;
    /* border: 1px solid #4475ff; */
    box-sizing: border-box;
    margin: 12px 6px 0;
    /* float: left; */
}
.tk_vd_img {
    width: 100%;
    height: 159px;
    border-bottom: 1px solid #165DFF;
}
.tk_vd_img_material {
    position: relative;
    width: 70px;
    height: 88px;
    border: 1px solid #165DFF;
}
.tk_vd_img_material img {
    display: block;
    width: 100%;
    height: 100%;
}
.change_img{
    height: 19px;
    background: #FFFFFF;
    /* position: absolute;
    bottom: 0;
    right: 0;
    left: 0; */
    border: 1px solid #165DFF;
    border-top: 0;
    cursor: pointer;
    justify-content: center;
}
.tk_vd_img img {
    display: block;
    width: 100%;
    height: 100%;
}
.close_icon{
    cursor: pointer;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 16px;
    top: 4px;
}
.close_icon img{
    display: block;
    width: 100%;
    height: 100%;
}
.blue {
    color: #4475ff;
}
.red{
    color: #fe6262;
}
.check{
    width: 18px;
    height: 18px;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #FFFFFF;
    cursor: pointer;
    right: 12px;
    top: 12px;
}
.check_active{
    background: #4475ff;
}
.tk_vd_duration {
    position: absolute;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
    font-size: 13px;
    color: #fff;
    top: 134px;
    left: 8px;
}
.tk_vd_duration_material{
     position: absolute;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
    font-size: 13px;
    color: #fff;
    bottom: 4px;
    left: 6px;
}
.tk_vd_name {
    margin: 6px 12px;
    height: 40px;
    line-height: 20px;
    font-size: 13px;
    color: #17233d;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.video_content .el-icon-error{
    position: absolute;
    right: -7px;
    top: -7px;
    font-size: 20px;
    color: #616C85;
    display: block;
    cursor: pointer;
}
.has_num_text{
    color: #B4B7BD;
}
</style>

